<!-- 聊天记录组件 -->
<script setup lang="ts" name="msgIndex">
import useMsgIndex from '@/components/index/message/hooks/msgIndex'
const { MsgLogs, MsgSend } = useMsgIndex()
</script>

<template>
  <div id="msg">
    <div class="right">
      <div class="right-display">
        <component :is="MsgLogs"></component>
      </div>
      <div class="right-input">
        <component :is="MsgSend"></component>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
#msg {
  margin-top: 6px;
  width: 100%;
  min-height: 600px;
  border-radius: var(--radius);
  background-color: var(--color1);
}

.right {
  height: 100%;
  width: 100%;

  > .right-display {
    height: 540px;
    width: 100%;
    border-bottom: 2px solid var(--color1);
    box-sizing: border-box;
    border-radius: 0 var(--radius) 0 0;
  }
  > .right-input {
    height: 200px;
    width: 100%;
    box-sizing: border-box;
    border-top: 2px dashed var(--color2);
  }
}
</style>
